@import "../../colors";

.sub-nav {
    display: flex;
    margin: 0 auto;
    padding: 5px 0;
    width: 100%;
    color: $type-white;
    font-size: .8rem;
    font-weight: 500;
    justify-content: center;
    flex-wrap: wrap;
    

    li {
        display: inline-block;
        margin: 5px;
        border: 1px solid $active-gray;
        border-radius: 50px;
        padding: .75em 1.5em;
        text-decoration: none;
        color: $type-white;
        list-style-type: none;

        &:hover {
            transition: background-color .25s ease;
            border-color: transparent;
            background-color: $active-gray;
        }

        &:active {
            border: 0 solid transparent;
            box-shadow: inset 0 0 5px $box-shadow-gray;
            background-color: $active-dark-gray;
            padding: calc(.75em + 1px) calc(1.5em + 1px);
        }

        &.description {
            /* clear styling for info element */
            border: 0;
            border-radius: none;
            text-decoration: none;

            &:hover {
                transition: none;
                background-color: transparent;
            }

            &:active {
                border: 0;
                box-shadow: none;
                background-color: transparent;
            }
        }
    }

    &.sub-nav-align-left {
        justify-content: flex-start;

        li {
            &:first-child {
                margin-left: 0;
            }
        }
    }

    &.sub-nav-align-right {
        justify-content: flex-end;
    }
}
